<template>
  <div>

    <bread-crumb></bread-crumb>
    <el-tag class="addSome"><i class="el-icon-plus"></i> {{addSome}}</el-tag>
    <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="id" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="tel" label="电话"></el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i>编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"><i
            class="el-icon-delete"></i>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="block">
      <el-pagination class="pagination_box" layout="prev, pager, next" :total="1000"></el-pagination>
    </div>

  </div>

</template>

<script>
  import BreadCrumb from '../components/breadcrumb'

  export default {
    data() {
      return {
        //        表格竖向border
        border: true,
        //        添加标签
        addSome: "添加管理员",
        tableData: [{
          id: '1',
          name: '王小虎',
          tel: '13599999999',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '2',
          name: '王小虎',
          tel: '13599999999',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '3',
          name: '王小虎',
          tel: '13599999999',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '4',
          name: '王小虎',
          tel: '13599999999',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '5',
          name: '王小虎',
          tel: '13599999999',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '6',
          name: '王小虎',
          tel: '13599999999',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '7',
          name: '王小虎',
          tel: '13599999999',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        //      multipleSelection: []
      }
    },
    components: {
      BreadCrumb
    },
    mounted: function () {
      var _this = this;
      _this.showTableData();
    },
    methods: {
//      渲染列表
      showTableData: function () {
        var _this = this;
        $.ajax({
          type: "get",
          url: "http://ow.fanzhanggui.test.sszshow.com/admin/shelf/index",
          dataType: 'jsonp',
          data: {
            page: 1,
            limit: 10
          },
          async: true,
          success: function (res) {
            console.log(res.data)
          }
        });
      },
      //      编辑
      handleEdit(index, row) {
        //        console.log(index, row);
        var that = this;
        that.$router.push('/addAdmin');
      },
      //      删除
      handleDelete(index, row) {
        console.log(index, row);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  /*添加标签*/

  .addSome {
    margin-bottom: 15px;
  }

  /*分页*/

  .pagination_box {
    text-align: center;
    margin-top: 20px;
  }

  .el-dialog,
  .el-pager li {
    background: #E9EEF3;
  }

  .pagination_box button.disabled {
    background-color: #E9EEF3;
  }

  .pagination_box .btn-next,
  .pagination_box .btn-prev {
    background: center center no-repeat #E9EEF3;
  }
</style>
